// 播放器组件
<template>
  <div class="player">
    <!-- 专辑图片展示界面 -->
    <div class="album">
      <img
        :src="currentMusic.image || require('@/assets/img/album.png')"
        alt=""
        v-lazy="currentMusic.image || require('@/assets/img/album.png')"
        class="album-img"
        :class="cdCls"
      />
    </div>
    <!-- 歌曲进度条 -->
    <div class="bottom">
      <!-- 已播放时长与总时长 -->
      <span v-if="currentMusic.id"
      class="time time-l">{{format(currentTime)}}/{{this.currentMusic.time|format}}</span>
      <div>
        <!-- 进度条插件 -->
        <progress-bar :percent="percent"/>
      </div>
    </div>
    <!-- 播放器功能操作按键 -->
    <div class="player-nav">
      <div>
        <!-- 播放模式 -->
      <i class="iconfont icon-liebiaoxunhuan"></i>
      </div>
      <div>
        <!-- 上一曲 -->
      <i class="iconfont icon-voiceright-copy" @click="prev"></i>
      </div>
      <div>
        <!-- 播放与暂停 -->
      <i class="iconfont icon-bofang" :class="playIcon" @click="togglePlaying"></i>
      </div>
      <div>
        <!-- 下一曲 -->
      <i class="iconfont icon-voiceright" @click="next"></i>
      </div>
      <div>
        <!-- 收藏 -->
      <i class="iconfont icon-heart-off"></i>
      </div>
    </div>
    <!-- 播放器 -->
    <audio ref="audio"
     :src="currentMusic.url"
     @canplay="ready" @error="error"
     @timeupdate="updateTime" ></audio>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import { addZero, format } from '@/util/util';
import progressBar from './progress-bar.vue';

export default {
  name: 'player',
  data() {
    return {
      // 歌曲是否已经播放
      musicReady: false,
      // 当前格式播放时间进度
      currentTime: '',
    };
  },
  filters: {
    // 过滤器，用于格式化歌曲时间数据
    format,
  },
  components: {
    progressBar,
  },
  computed: {
    // cd旋转
    cdCls() {
      return this.playing ? 'play' : 'play pause';
    },
    // 播放按钮切换
    playIcon() {
      if (this.currentMusic.id) {
        return this.playing ? 'icon-zantingtingzhi' : 'icon-bofang';
      }
      return '';
    },
    // 歌曲播放进度条比例
    percent() {
      return this.currentTime / (this.currentMusic.time / 1000);
    },
    // 获取vuex中的数据
    ...mapGetters(['currentMusic', 'playing', 'currentIndex', 'playList']),
  },
  methods: {
    // 点击播放歌曲事件
    togglePlaying() {
      if (!this.musicReady) {
        return;
      }
      this.setPlaying(!this.playing);
    },
    // 下一曲
    next() {
      if (!this.musicReady) {
        return;
      }
      let index = this.currentIndex + 1;
      if (index === this.playList.length) {
        index = 0;
      }
      this.setCurrentIndex(index);
      if (!this.playing) {
        this.togglePlaying();
      }
      this.musicReady = false;
    },
    // 上一曲
    prev() {
      if (!this.musicReady) {
        return;
      }
      let index = this.currentIndex - 1;
      if (index === -1) {
        index = this.playList.length - 1;
      }
      this.setCurrentIndex(index);
      if (!this.playing) {
        this.togglePlaying();
      }
      this.musicReady = false;
    },
    // 当前格式是否播放成功
    ready() {
      this.musicReady = true;
    },
    error() {
      this.musicReady = true;
    },
    // 歌曲播放时长
    updateTime(e) {
      this.currentTime = e.target.currentTime;
    },
    // 用于格式化当前歌曲已播放时长（当前歌曲时长与网易云歌曲总时长格式不统一）
    format(time) {
      const interval = time || 0;
      const minute = Math.floor(interval / 60 || 0);
      const second = Math.floor(interval % 60);
      return `${minute}:${addZero(second)}`;
    },
    ...mapMutations({
      setPlaying: 'SET_PLAYING',
      setCurrentIndex: 'SET_CURRENTINDEX',
    }),
  },
  watch: {
    // 监测当前歌曲变化
    currentMusic() {
      this.$nextTick(() => {
        this.$refs.audio.play();
      });
    },
    // 监测歌曲是否播放
    playing(newPlaying) {
      const { audio } = this.$refs;
      this.$nextTick(() => {
      // eslint-disable-next-line no-unused-expressions
        newPlaying ? audio.play() : audio.pause();
      });
    },
  },

};
</script>

<style lang="scss" scoped>
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  .album {
    padding-bottom: 20px;
    .album-img {
      width: 280px;
      border-radius: 50%;
      &.play{
        animation: rotate 10s linear infinite;
      }
      &.pause{
        animation-play-state: paused;
      }
    }
  }
  .bottom{
    width: 100%;
    text-align: right;
    color: #ffffff;
    align-items: center;
    padding: 10px 0;
    .time{
      font-size: 12px;
    }
    div{
      flex: 1;
    }
  }
  .player-nav {
  display: flex;
  div {
    color: #ffffff;
    padding: 015px;
    .icon-bofang {
      padding: 25px;
      border-radius: 50%;
      text-align: center;
      background: linear-gradient(
        to bottom,
        rgb(252, 88, 106),
        rgb(248, 136, 100)
      );
      box-shadow: 0px 0px 60px -10px #f88864;
    }
    i {
      font-size: 20px;
    }
  }
}
}
@keyframes rotate{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>
